﻿<!--提供了一个基本的框架，包括购物车展示、菜系列表、搜索功能以及下单操作等-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<!-- 包含公共的JSP代码片段 -->
	<title>锐颜酒家点餐平台</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="/detail/style/css/index.css" />
	<script type="text/javascript" src="/detail/style/js/jquery.js"></script>
	<script type="text/javascript" src="/detail/style/js/page_common.js"></script>

	<!--内嵌式的CSS-->
	<style type="text/css">
		/*类选择器*/
		.b{
			color: white;
			background-color: orange;
		}
	</style>

	<script type="text/javascript">
		/**
		 * 下单失败的提示
		 */
		$(function (){
			var flag = $('#Flag').val();
			if (flag === 'false')
			{
				alert('下单失败!');
			}
		})

		/**
		 * 跳转到查看购物车页面
		 * @param deskID
		 */
		function checkCart(deskID, typeID)
		{
			location.href = '/checkCart/' + deskID + '/' + typeID;
		}

		/**
		 * 去新的一页
		 * @param desk_id 餐桌的主键
		 * @param type_id 菜品类型的主键
		 * @param currentPage 当前页码
		 */
		function goNewPage(desk_id, type_id, currentPage)
		{
			location.href = '/menu_UI/' + desk_id + '/' + type_id + '/' + currentPage;
		}

		/**
		 * 更改数量
		 * @param node 数量
		 * @param cartID 购物车的主键
		 * @param deskID 餐桌的主键
		 * @param typeID 菜系的主键
		 */
		function alterNumber(node, cartID, deskID, typeID)
		{
			var number = node.value;
			var flag = true;

			for (let i = 0; i < number.length; i++)
			{
				if (number[i] >= '0' && number[i] <= '9')
				{
					continue;
				}else {
					flag = false;
					break;
				}
			}

			if (flag === true)
			{
				location.href = '/updateNumber/' + number + '/' + cartID + '/' + deskID + '/' + typeID;
			}else {
				alert('数量有误!');
			}
		}

		/**
		 * 精准删除某一个购物的菜品
		 * @param cartID 购物车的主键
		 * @param deskID 餐桌的主键
		 * @param typeID 类型的主键
		 */
		function removeCart(cartID, deskID, typeID)
		{
			if (confirm('您确定删除这道菜?'))
			{
				location.href = '/removeCart/' + cartID + '/' + deskID + '/' + typeID;
			}
		}

		/**
		 * 用户下单
		 * @param deskID 桌子的主键
		 * @param typeID 类型的主键
		 */
		function generateOrder(deskID, typeID)
		{
			if (confirm('您确定要下单吗?'))
			{
				location.href = '/generateOrder/' + deskID + '/' + typeID;
			}
		}
	</script>
</head>

<body style="text-align: center">
	<div id="all">
		<div id="menu">
			<!-- 餐车div -->
			<div id="count">
				<table align="center" width="100%">

					<tr height="40">
				 		<td align="center" width="20%">菜名</td>
				 		<td align="center" width="20%">单价</td>
				 		<td align="center" width="20%">数量</td>
				 		<td align="center" width="20%">小计</td>
				 		<td align="center" width="20%">操作</td>
				 	</tr>

					<tr height="60" th:each="cart: ${carts}">
						<td align="center" width="20%" th:text="${cart.food.title}"></td>
						<td align="center" width="20%">&yen;[[${cart.food.price}]]</td>
						<td align="center" width="20%">
							<input type="text" th:value="${cart.num}" size="3" lang="3" th:onblur="|alterNumber(this, ${cart.id}, ${desk.id}, ${type_id})|"/>
						</td>
						<td align="center" width="20%" th:text="${cart.total}"></td>
						<td align="center" width="20%">
							<input type="button" value="删除" class="btn_next" style="font-family: 宋体" lang="3" th:onclick="|removeCart(${cart.id}, ${desk.id}, ${type_id})|" />
						</td>
				 	</tr>

					<tr>
						<td colspan="6" align="right">总计:
							<span style="font-size:36px; font-family: 宋体">&yen;[[${totalPrice}]]</span>
							<label id="counter" style="font-size:36px"></label>
						</td>
					</tr>

					<tr>
						<td colspan="6" style="margin-left: 100px; text-align: center;"align="right">
							<input type="hidden" name="bId" value="">
							<input type="button" value="下单" class="btn_next" style="font-family: 宋体" th:onclick="|generateOrder(${desk.id}, ${type_id})|" />
							<input type="hidden" th:value="${flag}" id="Flag"/>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<!-- 右边菜系列表，菜品搜索框  -->
		<div id="dish_class">

			<div id="dish_top">
				<ul>
					<li class="dish_num"></li>
					<li>
						<a href="javascript:void(0);" th:onclick="|checkCart(${desk.id}, ${type_id})|">
							<img src="/detail/style/images/call2.gif" />
						</a>
					</li>
				</ul>
			</div>

			<div id="dish_2">
				<ul th:each="foodType: ${foodTypes}">
					<li>
						<a href="javascript:void(0);" th:text="${foodType.name}" style="font-family: 宋体" th:onclick="|goNewPage(${desk.id}, ${foodType.id}, 1)|"></a>
					</li>
				</ul>
			</div>

			<div id="dish_3" style="height: auto; margin-top: 150px">
				<!-- 搜索菜品表单  -->
				<form action="#" method="post">
					<table width="166px">
						<tr>
							<td>
								<!--餐桌信息-->
								<span style="color: black; font-weight: bold; font-size: 16px" th:text="'当前餐桌为: ' + '' +${desk.name}"></span>
								<a href="javascript:void(0);" th:onclick="|goNewPage(${desk.id}, 0, 1)|">
									<img src="/detail/style/images/look.gif" />
								</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>


	</div>
</body>
</html>
